@types/react-router

What is @types/react-router?

@types/react-router provides TypeScript type definitions for the react-router library, which is used for routing in React applications. These type definitions help developers use react-router with TypeScript, ensuring type safety and better developer experience.

What are @types/react-router's main functionalities?

Route Definitions

Defines a route in a React application, specifying the path and the component to render.

import { Route } from 'react-router-dom';

const App = () => (
  <Route path="/home" component={HomeComponent} />
);

Link Component

Creates navigational links in a React application, allowing users to navigate between different routes.

import { Link } from 'react-router-dom';

const Navigation = () => (
  <nav>
    <Link to="/home">Home</Link>
    <Link to="/about">About</Link>
  </nav>
);

useHistory Hook

Provides access to the history instance, allowing programmatic navigation within a React component.

import { useHistory } from 'react-router-dom';

const NavigateButton = () => {
  const history = useHistory();
  const handleClick = () => {
    history.push('/home');
  };
  return <button onClick={handleClick}>Go Home</button>;
};

useParams Hook

Extracts route parameters from the URL, making them available within a React component.

import { useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams<{ userId: string }>();
  return <div>User ID: {userId}</div>;
};

Other packages similar to @types/react-router

@types/react-router-dom

Provides TypeScript type definitions for the react-router-dom library, which is a specific implementation of react-router for web applications. It includes additional components like BrowserRouter and HashRouter.

@types/react-router-redux

Provides TypeScript type definitions for the react-router-redux library, which integrates react-router with Redux for state management. It allows for synchronized routing and state management.

@types/reach__router

Provides TypeScript type definitions for the @reach/router library, which is an alternative to react-router with a focus on accessibility and simplicity. It offers a similar API but with some differences in implementation and features.

README

Installation

npm install --save @types/react-router

Summary

This package contains type definitions for React Router (https://github.com/ReactTraining/react-router).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-router.

Additional Details

• Last updated: Fri, 23 Dec 2022 11:02:45 GMT
• Dependencies: @types/history, @types/react
• Global values: none

Credits

These definitions were written by Sergey Buturlakin, Yuichi Murata, Václav Ostrožlík, Nathan Brown, Alex Wendland, Kostya Esmukov, John Reilly, Karol Janyst, Dovydas Navickas, Huy Nguyen, Jérémy Fauvel, Daniel Roth, Egor Shulga, Rahul Raina, Duong Tran, Ben Smith, Wesley Tsai, Sebastian Silbermann, Nicholas Hehr, and Pawel Fajfer.